<template>
  <view class="container">
    <u-navbar
      :is-fixed="true"
      :border-bottom="false"
      :is-back="true"
      :background="{ background: '#fff' }"
      title="ta的主页"
      title-color="#000"
    >
    </u-navbar>
    <view class="top" v-if="userInfo.id">
      <view class="header">
        <image class="avatar" :src="baseUrl + userInfo.avatar"></image>
        <view style="display: flex; justify-content: space-between; width: 70%">
          <view>
            <view
              style="font-weight: bold; font-size: 30rpx; margin-bottom: 20rpx"
              >{{ userInfo.name }}</view
            >
            <view style="color: #666">手机号: {{ userInfo.phone }}</view>
          </view>
        </view>
      </view>
    </view>
    <u-subsection
      :list="list"
      :current="index"
      @change="change($event)"
    ></u-subsection>
    <view v-if="index == 0" class="diarys">
      <!-- 日记 -->
      <view
        v-for="item in diaryList"
        :key="item.id"
        class="each"
      >
        <view class="flex-between">
          <view class="bold">{{ item.title }}</view>
          <view>{{ item.updateTime }}</view>
        </view>
        <view class="flex-between mt20">
          <view>标签分类:{{ item.title }}</view>
        </view>
        <view style="display: flex;flex-direction: row-reverse;">
          <view class="delete red" @click="viewDiaryDetail(order)">查看详情</view>  
        </view>
      </view>
      <u-empty
        v-if="diaryList.length == 0"
        text="ta还没有记录~"
        mode="list"
      ></u-empty>
    </view>
    <view v-if="index == 1" class="diarys">
      <!-- 测评 -->
      <view :key="order.id" v-for="order in examList" class="each-order">
        <view class="mt10">测评名称：{{order.paper.name}}</view>
        <view class="mt10">测评时间：{{order.aligntime}}</view>
        <view class="mt10">测评得分：{{order.score}}</view>
        <view class="mt10">结果分析：{{order.analysis}}</view>
        <view style="display: flex;flex-direction: row-reverse;">
          <view class="cart red" @click="showDetail(order)">查看详情</view>  
        </view>
      </view>
      <u-empty
        v-if="examList.length == 0"
        text="ta还没有记录~"
        mode="list"
      ></u-empty>
    </view>
    <view v-if="!userInfo.id">该用户已注销</view>
  </view>
</template>

<script>
import { getUser, getDiary, getExam } from "../../api/system/api";
export default {
  data() {
    return {
      userInfo: {},
      userId: "",
      index: 0,
      diaryList: [],
      examList: [],
      baseUrl: "http://127.0.0.1:3000/",
      list: [
        {
          name: "ta的日记",
        },
        {
          name: "ta的测评",
        },
      ],
    };
  },
  onLoad(option) {
    this.userId = Number(option.userId);
    getUser({
      id: this.userId,
    }).then((res) => {
      if (res.code == 200 && res.data && res.data.data.length) {
        this.userInfo = res.data.data[0];
        // 获取用户日记
        getDiary({
          page: 1,
          pageSize: 100,
          userId: this.userId,
          see: "对咨询师可见",
        }).then((res) => {
          this.diaryList = res.data.data;
        });
        // 获取用户测评
        getExam({
          page: 1,
          pageSize: 100,
          userId: this.userId,
        }).then((res) => {
          this.examList = res.data.data;
        });
      } else {
        this.userInfo = {};
      }
    });
  },
  methods: {
    myOrder() {
      if (this.userInfo.id) {
        this.$u.route("/pages/order/orderList");
      } else {
        this.$refs.uToast.show({
          title: "请先登录~",
          type: "error",
        });
      }
    },
    myTest() {
      if (this.userInfo.id) {
        this.$u.route("/pages/order/testList");
      } else {
        this.$refs.uToast.show({
          title: "请先登录~",
          type: "error",
        });
      }
    },
    change(v) {
      this.index = v;
    },
    viewDiaryDetail(row) {
      this.$u.route("/pages/home/addDiary", {
        row: JSON.stringify(row),
        isView: true
      });
    },
    showDetail(order) {
      this.$u.route("/pages/manage/exam", {
        paperId: order.paper.id,
        userId: order.user.id,
        isView: true,
        viewAnswer: order.answers
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  overflow: hidden;
  background: #fafafa;
}
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20rpx;

  .img {
    width: 40rpx;
    height: 40rpx;
  }
}

.top {
  width: 100%;
  padding-top: 2vh;

  .header {
    display: flex;
    align-items: center;
    padding: 30rpx;

    .avatar {
      width: 140rpx;
      height: 140rpx;
      line-height: 140rpx;
      text-align: center;
      border-radius: 50%;
      color: #fff;
      margin-right: 30rpx;
    }

    .unlogin .avatar {
      background: #7d8e8e;
    }
  }
}
.order {
  width: 94%;
  height: 150rpx;
  margin: 30rpx 3%;
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 4rpx 5rpx 19rpx 4rpx lightgrey;
  display: flex;
  padding-top: 20rpx;
  justify-content: space-around;

  .tab {
    .img {
      width: 60rpx;
      height: 60rpx;
      margin-left: 20rpx;
    }
    .text {
      width: 100rpx;
      text-align: center;
      color: #666;
      font-size: 20rpx;
      margin-top: 10rpx;
    }
  }
}
.order2 {
  width: 94%;
  height: 200rpx;
  margin: 30rpx 3%;
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 4rpx 5rpx 19rpx 4rpx lightgrey;
  padding: 20rpx 30rpx;
}
.order22 {
  display: flex;
  padding-top: 20rpx;
  gap: 30rpx;
  .tab {
    .img {
      width: 60rpx;
      height: 60rpx;
      margin-left: 20rpx;
    }
    .text {
      width: 100rpx;
      text-align: center;
      color: #666;
      font-size: 20rpx;
      margin-top: 10rpx;
    }
  }
}
.modal {
  padding: 20rpx 60rpx 40rpx 60rpx;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .flex {
    display: flex;
    margin-top: 60rpx;
    justify-content: space-between;
  }
}

.modal-title {
  width: 100%;
  text-align: center;
  font-size: 30rpx;
  font-weight: bold;
  margin-top: 30rpx;
}

.modal-subtitle {
  width: 100%;
  text-align: center;
  font-size: 30rpx;
  margin-top: 20rpx;
}
.diarys {
  padding: 20rpx;
  height: 66vh;
  overflow: hidden;
  overflow-y: scroll;

  .each {
    padding: 20rpx 30rpx;
    background: rgb(231, 235, 237);
    border-radius: 10rpx;
    margin-top: 20rpx;
    position: relative;
  }
}
.each-order {
  width: 96%;
  margin: 20rpx 2%;
  padding: 20rpx;
  background: #fff;
  border-radius: 20rpx;
  position: relative;
}
.red {
  color: red;
}
</style>
